<template>
	<view class="content">
		<view class="nav-part-bg"></view>
		<view class="body">
			<!-- <view class="nav-day">
				<selectDay :outDate="selDay" @selectDay="updateDay"></selectDay>
			</view> -->
			<view class="showbody" v-if="task.length">
				<view class="footer" v-for="(item, index) in task" :key="index">
					<view class="step-spot">
						<u-collapse class="collapse">
							<u-collapse-item :title="'站点：' + item.name" name="Docs guide">
								<view class="step">
									<view class="cellbody">
										<view class="cellbody-row-left">
											<text class="cellbody-title">行车三检：</text>
											<text
												class="cellbody-content">{{ item.checkOutThree ? (JSON.parse(item.checkOutThree).result == 0 ? '放行' : '不放行') : '' }}</text>
										</view>
										<view class="cellbody-row-right">
											<text class="cellbody-title">安全承诺：</text>
											<text
												class="cellbody-content">{{ item.checkOutBefore ? (JSON.parse(item.checkOutBefore).result == 0 ? '放行' : '不放行') : '' }}</text>
										</view>
									</view>
									<view class="cellbody">
										<view class="cellbody-row-left">
											<text class="cellbody-title">行车前检查：</text>
											<text class="cellbody-content">
												{{ item.checkOutThree ? (JSON.parse(item.checkOutThree).before == 0 ? '✓' : '✗') : '' }}
											</text>
										</view>
										<view class="cellbody-row-right">
											<text class="cellbody-title">行车途中检查：</text>
											<text class="cellbody-content">
												{{ item.checkOutThree ? (JSON.parse(item.checkOutThree).mid == 0 ? '✓' : '✗') : '' }}
											</text>
										</view>
									</view>
									<view class="cellbody">
										<view class="cellbody-row-left">
											<text class="cellbody-title">收车后中检查：</text>
											<text class="cellbody-content">
												{{ item.checkOutThree ? (JSON.parse(item.checkOutThree).after == 0 ? '✓' : '✗') : '' }}
											</text>
										</view>
										<view class="cellbody-row-right">
											<text class="cellbody-title">是否安全告知：</text>
											<text class="cellbody-content">
												{{ item.checkOutBefore ? (JSON.parse(item.checkOutBefore).safe == 0 ? '✓' : '✗') : '' }}
											</text>
										</view>
									</view>
									<view class="cellbody">
										<text class="cellbody-title">是否督促系安全带：</text>
										<text class="cellbody-content">
											{{ item.checkOutBefore ? (JSON.parse(item.checkOutBefore).belt == 0 ? '✓' : '✗') : '' }}
										</text>
									</view>
									<view class="cellbody">
										<view class="cellbody-row-right">
											<text class="cellbody-title">线路：</text>
											<text class="cellbody-content">{{ item.lineName }}</text>
										</view>
									</view>
									<view class="cellbody">
										<view class="cellbody-row-right">
											<text class="cellbody-title">司机：</text>
											<text class="cellbody-content2">{{ item.driverName }}</text>
											<text class="cellbody-content2">{{ item.driverPhone }}</text>
											<text class="cellbody-content2">{{ item.plateNumber }}</text>
										</view>
									</view>
								</view>
							</u-collapse-item>
						</u-collapse>
						<view class="foot-tip">
							<view class="row-tip">
								<view class="cell">
									<view class="cell-row-left">
										<text class="letter-title">车上全票人数：</text>
										<text class="cell-content">{{ item.checkOutCnt1 || 0 }}</text>
									</view>
									<view class="cell-row-right">
										<text class="letter-title">车上半票人数：</text>
										<text class="cell-content">{{ item.checkOutCnt2 || 0 }}</text>
									</view>
								</view>
								<view class="cell">
									<view class="cell-row-left">
										<text class="letter-title">车上免票人数：</text>
										<text class="cell-content">{{ item.checkOutCnt3 || 0 }}</text>
									</view>
									<view class="cell-row-right">
										<text class="cell-title">编号：</text>
										<text class="cell-content">{{ item.vehicleCode }}</text>
									</view>
								</view>
								<view class="cell">
									<view class="cell-row-right">
										<text class="cell-title">时间：</text>
										<text class="cell-content2">{{ item.checkOutTime }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<empty class="showbody" v-else text="查无数据"></empty>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import selectDay from '@/components/selectDay.vue';
	import empty from '@/components/empty.vue';
	import globaljs from '@/api/global.js';
	import common from '@/utils/common.js';
	export default {
		components: {
			selectDay,
			empty
		},
		computed: {
			...mapGetters(['operator', 'token'])
		},
		onLoad() {
			// #ifdef MP
			//未登录转登录页面，已登录转主页面
			if (!this.$store.dispatch('checkIndentity')) return;
			// #endif
			this.initPage();
		},
		methods: {
			async initPage() {
				//初始加载入站车辆
				let param = {
					stationId: this.operator.stationId,
					token: this.token,
					userId: this.operator.userId,
					getType: 1
				};
				let res = await globaljs.getOperatorData(param);
				if (common.httpIsWrong(res)) return;
				this.task = res.json.data.data;
			}
		},
		data() {
			return {
				task: [1],
				selDay: new Date()
			};
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		background-color: white;
		overflow: scroll;
		// padding-top: 100rpx;
		position: relative;

		.nav-part-bg {
			width: 100%;
			height: 0;
			background-color: #1a90e4;
			position: fixed;
			top: 0;
			z-index: 0;
		}

		.body {
			width: 100%;
			height: 100%;
			position: relative;

			.nav-day {
				width: 100%;
				height: 100rpx;
				color: white;
				background-color: #1a90e4;
				position: fixed;
				top: var(--window-top, 0);
				z-index: 99;
			}

			.header {
				border: solid 1rpx #1a90e4;
				width: 100%;
				height: auto;
				position: fixed;
				top: var(--window-top, 0);
				z-index: 99;
				box-shadow: 0px 1px 5px #d9d9d9;
				background-color: white;

				.row {
					margin: 20rpx;
					align-items: center;
					border: solid 1rpx #3c9cff;
					border-radius: 10rpx;
					background-color: #f1f2f4;

					.line {
						width: 100%;
						position: relative;
					}
				}
			}

			.footer {
				margin: 20rpx 20rpx;
				border-radius: 10rpx;
				background-color: white;
				box-shadow: 0px 1px 5px #888888;

				.step-spot {
					display: flex;
					flex-direction: column;

					.foot-tip {
						background-color: #e8f2fe;
						border-radius: 0 0 10rpx 10rpx;
						padding: 10rpx 30rpx;

						.row-tip {
							display: flex;
							flex-direction: column;

							.tip-m {
								color: #3c9cff;
							}

							.cell {
								padding: 10rpx 0;
								display: flex;

								.cell-title {
									letter-spacing: 10rpx;
									font-size: 28rpx;
								}

								.letter-title {
									font-size: 28rpx;
								}

								.cell-content {
									letter-spacing: 10rpx;
									font-size: 28rpx;
									color: #1a90e4;
									margin: 0 20rpx;
								}

								.cell-content2 {
									font-size: 28rpx;
									color: #1a90e4;
									margin: 0 20rpx;
									letter-spacing: 3rpx;
								}

								.cell-row-left {
									width: 50%;
								}

								.cell-row-right {
									flex: 1;
								}

								.cell-row {
									width: 50%;
								}
							}
						}
					}

					.collapse {
						width: 100%;
					}

					.step {
						display: flex;
						flex-direction: column;

						.cellbody {
							padding: 10rpx 0;
							display: flex;

							.cellbody-title {
								font-size: 28rpx;
							}

							.cellbody-content {
								font-size: 28rpx;
								letter-spacing: 4rpx;
								color: #1a90e4;
								margin-left: 20rpx;
							}

							.cellbody-content2 {
								font-size: 28rpx;
								color: #1a90e4;
								margin-left: 20rpx;
							}

							.cellbody-row-left {
								width: 50%;
							}

							.cellbody-row-right {
								flex: 1;
							}

							.cellbody-row {
								width: 50%;
							}
						}
					}
				}
			}
		}
	}

	::v-deep .u-steps.u-steps--column {
		width: 100%;
	}
</style>